<template>
	<view>
		<!-- navbar -->
		<van-nav-bar title="首页" :border="false" title-class="custom-navbar-title" />
		<!-- scroll-view -->
		<scroll-view scroll-y :style="{height: height, backgroundColor: '#f8f8f8'}">
			<!-- banner -->
			<view class="home-banner">
				<swiper class="swiper" autoplay circular indicator-dots interval="3000" duration="500">
					<swiper-item class="swiper-item" v-for="(img, index) in bannerList" :key="index">
						<van-image radius="8rpx" width="100%" height="100%" :src="img.path" lazy-load/>
					</swiper-item>
				</swiper>
			</view>
			<!-- diamond -->
			<view class="home-diamond">
				<view class="home-diamond-item" v-for="(item, index) in diamondList" :key="index" @tap="toPage(item)">
					<text :class="['iconfont', item.icon, 'fontsize36']"/>
					<text v-text="item.title"/>
				</view>
			</view>
			<!-- vip -->
			<view class="home-vip">
				<van-image lazy-load radius="8rpx" width="100%" height="100%" src="http://zhj-jiuba.oss-cn-hangzhou.aliyuncs.com/picture/image1.jpg" />
			</view>
			<!-- recommend -->
			<view class="home-recommend">
				<view class="home-recommend-title">
					<text>店长推荐</text>
				</view>
				<scroll-view class="home-recommend-content-box" scroll-x>
					<view class="home-recommend-content" :style="{width: width}">
						<view @tap="toDetail(item)" class="home-recommend-content-item" v-for="(item, index) in recommendList" :key="index">
							<van-image lazy-load radius="8rpx" width="100%" height="180rpx" :src="base_url + item.image" />
							<view class="van-ellipsis" style="padding-top: 8rpx;">
								<text v-text="item.goodsName"/>
							</view>
						</view>
					</view>
					
				</scroll-view>
			</view>
			<!-- 地址 -->
			<!-- company -->
			<view style="padding: 0 32rpx;">
				<van-divider contentPosition="center">重庆九翕提供技术支持</van-divider>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	import {base_url} from '../../utils/request.js'
	export default {
		data() {
			return {
				/// 金刚区
				diamondList: [
					{title: '扫码点餐', icon: 'icon-saoma'},
					{title: '存酒', icon: 'icon-hongjiu'},
					{title: '买单', icon: 'icon-zhifu'},
					{title: '余额充值', icon: 'icon-yue', url: '/pages/home/chargeCenter'},
				],
				base_url
			}
		},
		computed: {
			...mapState(['bannerList', 'recommendList']),
			height() {
				return this.scrollviewHeilght - 96 + 'px'
			},
			width() {
				return (this.recommendList.length * 212 - 32) + 'rpx';
			}
		},
		methods: {
			...mapActions(['setGoodsDetail']),
			toPage(item) {
				if(item && item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			// 商品详情
			toDetail(item) {
				this.setGoodsDetail({goodsDetail: item});
			}
		},
		created() {
		}
	}
</script>

<style lang="scss" scoped>
	.home-banner {
		height: 500rpx;
		border-radius: 8rpx;
		overflow: hidden;
		margin: 0 16rpx;
		background-color: #fff;
		.swiper {
			width: 100%;
			height: 100%;
			.swiper-item {
				height: 100%;
				width: 100%;
			}
		}
	}
	.home-diamond {
		background-color: #fff;
		height: 220rpx;
		margin: 16rpx;
		box-shadow: #999 0px 0px 10px;
		display: flex;
		color: #333333;
		padding: 0 16rpx;
		.home-diamond-item {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.fontsize36 {
				font-size: 68rpx!important;
				font-weight: bold;
				padding-bottom: 8rpx;
			}
		}
	}
	.home-vip {
		background-color: #fff;
		height: 280rpx;
		box-shadow: #999 0px 0px 10px;
		margin: 16rpx;
	}
	
	.home-recommend {
		background-color: #fff;
		padding: 0 32rpx;
		margin: 32rpx 0;
		.home-recommend-title {
			font-size: 32rpx;
			padding-bottom: 16rpx;
		}
		.home-recommend-content-box {
			width: 100%;
			height: 240rpx;
			.home-recommend-content {
				// width: 1240rpx;
				.home-recommend-content-item {
					width: 180rpx;
					float: left;
					margin-right: 32rpx;
					text-align: center;
					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>
